<template>
  <div class="app">
    <h3 ref="title" class="title" :style="{color:titleColor}">{{message}}</h3>
    <button ref="btn" @click="chanageTitle">修改title</button>
    <banner ref="banner"></banner>
  </div>
</template>

<script>
import {toRaw} from 'vue'
import Banner from './Banner.vue'
export default {
  name: "App",
  components:{
    Banner
  },
  data(){
    return{
      message:'Hello World',
      titleColor:'red'
    }
  },
  methods:{
    chanageTitle(){
      console.log('this.$refs.title:',this.$refs.title)
      console.log('this.$refs.btn:',this.$refs.btn)
      console.log('this.$refs.banner:',this.$refs.banner)
      this.$refs.banner.bannerClick()
      console.log("this.$parent:",this.$parent)
      console.log("this.$root:",toRaw(this.$root))
    }
  }
}
</script>

<style scoped>

</style>